<template>
  <my-slot :title="title" :desc="desc" :showBgColor="true">
    <b-row class="mx-0">
      <b-col lg="4" md="6" sm="12"
        v-for="(item, ind) of productList"
        :key="ind"
        class="wow fadeInUp"
        :data-wow-delay="(0.2 * ind) + 's'"
      >

        <b-card img-top class="my-2">
          <b-card-img class="w-75 mx-auto d-block rounded thumbnail " :src="item.icon"></b-card-img>
          <b-card-title class="w-75 mx-auto mt-2 text-truncate">{{item.title}}</b-card-title>
          <b-card-text class="w-75 mx-auto card-body-text text-muted">{{item.desc}}</b-card-text>
          <b-button variant="outline-info"
            class="mx-auto d-block my-btn"
            @click="$router.push('/business/' + item.id)"
          >了解更多</b-button>
        </b-card>
      </b-col>
    </b-row>
  </my-slot>
</template>

<script>
import MySlot from '@/components/slot/index'

export default {
  components: {
    MySlot
  },
  data() {
    return {
      title: '记录',
      desc: '阜阳师范信息工程学院计算机协是一个培养计算机、网络、预防才能的学习、交流、研究、自治性、学术性学生的社团。',
      productList: [
        {id: 1, icon: require('~/static/img/business/business01.jpg'), title: '诚信与踏实', desc: '言必行，行必果。认真对待每一件事，对自己承诺的每一件事情都必须实现的一个干实事、有诚信的社团。'},
        {id: 2, icon: require('~/static/img/business/business02.jpg'), title: '交流协作', desc: '学会交流与协作，在社团与社团、社团与组织、社团与实验室、社团与指导老师之间要经常合作交流，只有相互交流，才能找到自身的不足，才能改正自己的不足，才能将社团发展的更加好。'},
        {id: 3, icon: require('~/static/img/business/business03.jpg'), title: '活动创新', desc: '对已有较好的活动进行传承和发展，努力创新符合协会的、能够引起协会成员兴趣的活动。 城市重大活动安全，提升城市全方位掌控能力，提高应急事件决策效率，实现事前事中事后的全流程跟踪处理，防范于未然。'}
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.scss';

.card {
  border: none;
}
.card:hover {
  // background: #F1F1F1;
  box-shadow: 0 0 10px #ccc;
}
.card-body-text {
  max-height: 102px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
</style>
